<template>
  <div class="address-ament">
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
      @focus="focus"
    >
    <div style="padding:1px 17px;margin-top:17px">
    <span style="font-size:13px;">性别</span>
    <van-radio-group style="float:right" v-model="radio" direction="horizontal" icon-size="13px">
    <van-radio name="true">男</van-radio>
    <van-radio name="false">女</van-radio>
    </van-radio-group>
    </div>
    <div style="padding:1px 17px;margin-top:25px">
    <span style="font-size:13px;">地址标签</span>
    <van-radio-group style="float:right" v-model="space" direction="horizontal" icon-size="13px">
    <van-radio name="家">家</van-radio>
    <van-radio name="学校">学校</van-radio>
    <van-radio name="单位">单位</van-radio>
    </van-radio-group>
    </div>
    </van-address-edit>
  </div>
</template>

<script>
import Vue from 'vue'
import { AddressEdit, Toast, RadioGroup, Radio } from 'vant'
import request from '@/API/request'
import { deleteAddress, amentAddress } from '@/API/addressAment'

Vue.use(AddressEdit)
Vue.use(Toast)
Vue.use(RadioGroup)
Vue.use(Radio)
export default {
  name: 'addressAment',
  data () {
    return {
      radio: 'true',
      space: '家',
      areaList: {
        province_list: {
          // 110000: '北京市',
          // 120000: '天津市'
        },
        city_list: {
        },
        county_list: {
        }
      },
      searchResult: [],
      item: {}
    }
  },
  methods: {
    onSave (values) {
      console.log(values)
      const value = {
        id: this.item.id,
        name: values.name,
        phone: values.tel,
        detail: values.addressDetail,
        area: values.province + values.city + values.county,
        sex: this.radio,
        tag: this.space,
        default: values.isDefault,
        ZIP: values.postalCode
      }
      console.log(value)
      amentAddress(value).then(res => {
        if (res.meta.code === 200) {
          Toast('修改成功,您将回到地址列表')
          setTimeout(() => {
            this.$router.push('/address')
          }, 2000)
        }
      })
    },
    onDelete (id) {
      console.log(this.item.id)
      deleteAddress(this.item.id).then(res => {
        console.log(res)
        Toast.success('删除成功,您将要回到地址列表')
        setTimeout(() => {
          this.$router.push('/address')
        }, 2000)
      })
    },
    onChangeDetail (val) {
      if (val) {
        this.searchResult = [
        ]
      } else {
        this.searchResult = []
      }
    },
    focus () {
      // document.querySelectorAll('.van-field__control')[0].value = this.item.name
      // document.querySelectorAll('.van-field__control')[1].value = this.item.tel
      // document.querySelectorAll('.van-field__control')[3].value = space[2]
    },
    getArea: () => {
      return request({
        url: '/area',
        method: 'get'
      })
    }
  },
  created () {
    this.getArea().then(res => {
      this.areaList.province_list = res.body.province_list
      this.areaList.city_list = res.body.city_list
      this.areaList.county_list = res.body.county_list
    })
    console.log('sdfsdf', this.$route.query)
    this.item = this.$route.query
  },
  mounted () {
    const zip = this.item.ZIP_code
    const space = this.item.address.split(' ')
    if (this.item.ZIP_code === '') {
      this.item.ZIP_code = '您还没注册过邮箱'
    } else {
      this.item.ZIP_code = zip
    }
    document.querySelectorAll('.van-field__control')[0].setAttribute('placeholder', this.item.name)
    document.querySelectorAll('.van-field__control')[1].setAttribute('placeholder', this.item.ZIP_code)
    document.querySelectorAll('.van-field__control')[2].setAttribute('placeholder', space[0])
    document.querySelectorAll('.van-field__control')[3].setAttribute('placeholder', space[2])
    document.querySelectorAll('.van-field__control')[4].setAttribute('placeholder', this.item.ZIP_code)
    document.querySelectorAll('.van-field__control')[1].value = this.item.tel
    document.querySelectorAll('.van-field__control')[0].setAttribute('value', this.item.name)
    document.querySelectorAll('.van-field__control')[3].value = space[2]
    document.querySelectorAll('.van-field__control')[2].value = space[0]
    document.querySelectorAll('.van-field__control')[4].value = this.item.ZIP_code
  }
}
</script>

<style lang="scss" scoped>
</style>
